<template>
	<view class="pay">
		<u-navbar :placeholder="false" bg-color="#ffffff" :autoBack="true" title="模板付费"></u-navbar>
		<view class="box">
			<u-toast ref="uToast"></u-toast>
			<u-text text="模板设计费" type="info"></u-text>
			<view class="mt20 flex_box gap20 price_boxs">
				<view class="flex_box flex_direction flex_between price_box" :class="{'active': type == index}" v-for="(item, index) in list" :key="index" @click="chooseType(index)">
					<u-text :text="item.name" size="20" bold="true" align="center"></u-text>
					<u-text mode="price" :text="item.price" color="#f5d16f" size="25" bold="true"></u-text>
				</view>
			</view>
			<u-line></u-line>
			<view class="mt50">
				<u-text text="购买说明" size="17"></u-text>
				<view class="mt20">
					<u-text text="1.邀请函模板可重复制作使用，终身保存。"></u-text>
				</view>
				<view class="mt10">
					<u-text text="2.支持转发亲朋好友，朋友圈!"></u-text>
				</view>
			</view>
			<!-- <view class="flex_box contact-box mt20 flex_start">
				<u-col span="8"><u-text text="如需帮助，请联系在线客服:" color="#9a9a9a" size="16"></u-text></u-col>
				<u-col span="4"><u-text text="点击咨询" color="#3c86c0" size="16"></u-text></u-col>
			</view> -->
			<view class="mt20">
				<u-text text="一次购买 终身有效"></u-text>
			</view>
			<view class="mt20">
				<u-button @click="toBuy" color="#f5254c">立即支付￥ {{payPrice}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { payMoney, getPrice } from '@/common/js/http.api.js';
	let that;
	export default {
		data() {
			return {
				form: {code: ''},
				list: [],
				type: 0,
				payPrice: 0
			}
		},
		onLoad() {
			that = this;
			that.getList();
		},
		methods: {
			getList: async() => {
				let res = await getPrice();
				that.list = res.code == 1 ? res.data : [];
				if (res.code == 1) {
					that.payPrice = res.data[0].price
				}
			},
			chooseType: (index) => {
				that.type = index;
				that.payPrice = that.list[index].price;
			},
			toBuy: async() => {
				// #ifdef MP-WEIXIN
				let codeInfo = await uni.login()
				that.form.code = codeInfo.code
				// #endif
				that.form.type = that.type;
				payMoney(that.form).then(res=>{
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						timeStamp: res.timeStamp + '',
						success(result) {
							that.$refs.uToast.show({
								type: "success",
								message: "购买成功",
								complete(){
									uni.navigateBack();
								}
							});
						},
						fail(result) {
							that.$refs.uToast.show({
								type: "error",
								message: "购买失败",
								complete(){
								}
							});
						},
					})
					// #endif
				}).catch(err=>{
					uni.$u.toast(err.msg);
				});
			},
		}
	}
</script>

<style lang="scss">
	.pay {
		.box {
			margin-top: 192rpx;
			padding: 0 40rpx;
			.price_boxs {
				width: 100%;
				overflow: scroll;
			}
			.price_box {
				height: 350rpx;
				border: 4rpx solid #e7deab;
				padding: 0 30rpx;
				border-radius: 10rpx;
			}
			.active {
				background-color: #fdf9e8;
			}
			.contact-box {
				background-color: #f8f8f8;
				padding:20rpx;
				height: 600rpx;
			}
		}
	}
</style>
